<style>
    .bgCls{
        width:100%;
        height:100%;
        position:fixed;
        z-index: -999;
        background-image: url("../../images/office2.jpg");
        background-size: 100% 100%;
    }
    .center_v{
        background-color: #F8F8FF;
    }
    .openFolderCls{
        background-image: url("../../images/folder.png");
        background-position:right center;
        position:absolute;
        -webkit-background-size:100% 100%;
        background-size:100%;
        height:25px;
        width:20px;
    }
    page > ul > li{
        background-color:white;
    }
    page > span{
        background-color:white;
    }
</style>
<div class="bgCls"></div>
<div class="col-md-4"></div>
<div class="col-md-4" id="vue_file_list">
    <table class="table table-striped table-bordered table-hover table-condensed center_v">
        <thead>
            <th>序号</th>
            <th>文件列表 <i class="openFolderCls" @click="openFolder('modular/working/workspace/workingDoc')"></i>
                <marquee width="150px" style="margin-left:25px;">点击文件夹图标，显示文件所在位置。将文件拷贝到该位置下，刷新即可显示文件。</marquee>
            </th>
        </thead>
        <tbody>
            <tr v-for="(item,index) in items">
                <td style="vertical-align: middle;text-align: center;">{{index+1}}</td>
                <td><img v-bind:src="item.imgUrl" width="45"><a href="javascript:void(0);" @click="open(item.filePath)">{{item.fileName}}</a></td>
            </tr>
        </tbody>
    </table>
    <page total="" pagesize="8" onPageChange="paging"></page>
</div>
<div class="col-md-4"></div>

<script type="text/javascript">
    var vue_file_list;
    $(function(){
        $.post("working/workingDocNames",null,function(result){
            vue_file_list = new Vue({
                el:"#vue_file_list"
                ,data:{
                    items:result
                }
                ,methods:{
                    open: function (path) {
                        //path = path.substr(1,path.length);
                        $.post("working/openFile", {'path': path}, function () {
                        }, "json");
                    }
                    ,openFolder:function(path){
                        $.post("working/workingDocFolder", {'path': path}, function () {
                        }, "json");
                    }
                }
            });
            $.post("working/totalWorkingDocNames",null,function(result){
                $("page").attr("total",result.total);//设置分页组件总条数
            },"json");
        },"json");
    });

    (function(){
        var random = Math.floor(Math.random()*10)%3+1;
        $(".bgCls").attr("style","width:100%;height:100%;position:fixed;z-index: -999;background-image: url('../../images/office"+random+".jpg');background-size: 100% 100%;");
    })();

    function paging(a){
        $.post("working/workingDocNames",{curIndex:a-1},function(result){
            vue_file_list.items = result;
            $.post("working/totalWorkingDocNames",null,function(result){
                $("page").attr("total",result.total);//设置分页组件总条数
            },"json");
        },"json");
    }
</script>
<script src="../../js/jquery-2.1.1.min.js"></script>
<script src="../../js/bootstrap.min.js"></script>
<script src="../../js/lai.page.js"></script>